import DragTest from "@components/DragTest/DragTest";
import ReactComponentTs from "@components/ReactComponentTs/ReactComponentTs";
import ReactMixinComponent from "@ReactMixinComponent";
import React from "react";
import styles from "./home.less";
import Beizer from "@components/Beizer/Beizer";
import globalStore from "@globalStore";

interface Props { }

interface State {
    dev: boolean
}

export default class Home extends ReactMixinComponent<Props, State> {
    constructor(props: Props) {
        super(props);
    }

    state: State = {
        dev: globalStore.dev
    }

    componentDidMount() {
        this.mixin_autorun(() => {
            const { dev } = globalStore;
            this.setState({ dev });
        });
    }

    componentWillUnmount() { }

    render() {

        const { dev } = this.state;

        return (
            <div className={styles.home}>
                <p>{"尝试改变浏览器宽度来查看 globalStore.zoom 值的变化"}</p>

                <p>
                    globalStore.zoom  是全局显示比例
                    页面只考虑最小宽度1200px来开发, 当小于1200px时 这个比例就会变小
                    将他应用在body上面可以等比缩放整个页面
                    <br /> 注意文字只会缩放到视觉上看起来最小12px, 所以 文字也会产生换行
                </p>

                <p>开发模式:{dev}</p>

                <ReactComponentTs />

                <DragTest />
                <DragTest />
                <Beizer />
            </div>
        );
    }
}

